<template>
  <div class="bottom_echarts_box">
    <div id="abnormal_statistics"></div>
    <!--    文字描述-->

    <div class="device_basic">
      <span style="color: white">工作：</span><span :style="{color:'green'}">{{ details.nomalHour }}h</span>
    </div>
    <div style="background: #2f4268" class="device_basic">
      <span style="color: #67e1fa;">关机：</span><span :style="{color:'red'}">{{ details.colseHour }}h</span>
    </div>
    <div class="device_basic">
      <span style="color: white">异常：</span><span :style="{color:'orange'}">{{ details.exHour }}h</span>
    </div>
    <div class="device_basic" style="background: #2f4268">
      <span style="color: #67e1fa;">待机：</span><span :style="{color:'yellow'}">{{ details.waitHour }}h</span>
    </div>
  </div>
</template>

<script>
import {toRefs} from "vue"

export default {
  name: "abnormal_statistics",
  props: {
    details: {
      type: Object,
      default: {}
    }
  },
  setup(props, context) {
    let {details} = toRefs(props)
    let option = {
      tooltip: {
        trigger: 'item'
      },
      //右侧统计图表
      legend: {
        show: false,
        orient: 'vertical',
        left: 'left',
      },
      color: ['green', 'red', 'orange', 'yellow'],
      series: [
        {
          name: '设备状态统计',
          type: 'pie',
          radius: '50%',
          data: [
            {value: 1048, name: '工作：' + 1048},
            {value: 735, name: '关机：' + 735},
            {value: 580, name: '异常：' + 580},
            {value: 484, name: '待机：' + 484},
            // {value: 300, name: '视频广告'+1048}
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 1)'
            }
          }
        }
      ]
    };


    return {
      option,
      details
    }
  },
  methods: {
    init() {
      const details = this.details
      if (this.details) {
        this.option.series[0].data = [
          {value: details.nomalHour, name: '工作：' + details.nomalHour},
          {value: details.colseHour, name: '关机：' + details.colseHour},
          {value: details.exHour, name: '异常：' + details.exHour},
          {value: details.waitHour, name: '待机：' + details.waitHour},
        ]
      }
      let myChart = this.$echarts.init(document.getElementById("abnormal_statistics"));
      myChart.setOption(this.option)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    pie_option() {
      return {
        // title: {
        //   text: '设备状态分布统计',
        //   subtext: '',
        //   left: 'center',
        //   textStyle: {
        //     // width:200
        //     color: '#3A7BD5',
        //   },
        // },
        tooltip: {
          trigger: 'item'
        },
        //右侧统计图表
        legend: {
          show: false,
          orient: 'vertical',
          left: 'left',
        },
        color: ['green', 'red', 'orange', 'yellow'],
        series: [
          {
            name: '设备状态统计',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: '工作：' + 1048},
              {value: 735, name: '关机：' + 735},
              {value: 580, name: '异常：' + 580},
              {value: 484, name: '待机：' + 484},
              // {value: 300, name: '视频广告'+1048}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 1)'
              }
            }
          }
        ]
      };
    },
  },
  watch: {},
  mounted() {
    document.getElementById("abnormal_statistics").removeAttribute('_echarts_instance_')
    this.init()

  }
}
</script>

<style scoped lang="scss">
.bottom_echarts_box {

  padding: 0 10px 10px;

  .item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
}

.device_basic {
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

.back {
  background-color: #2f4268;

}
</style>
